<template>
	<view :style="viewColor">
		<form @submit="formSubmit" report-submit='true'>
			<view class="release_content">
				<view>
					<view class="release_item">
						<view class="photo_count">
							<view class="input_photo acea-row row-middle">	
								<view v-if="!formData.pic" class="pictrue acea-row row-center-wrapper row-column add" @click.stop="clk">
									<view><text class='iconfont icon-icon25201'></text></view>
									<view class="text">添加图片</view>	
								</view>
							</view>
						</view>
						<view class="pictrue" v-if="formData.pic">
							<image :src="formData.pic" mode="widthFix"  @click.stop="clk" />
						</view>
						<view class="textarea">
							<textarea placeholder='请填写标题' name="comment" placeholder-class='placeholder' v-model="formData.title" maxlength="600"></textarea>
						</view>
					</view>
					<view class="release_item">
						<view class='item acea-row row-between-wrapper'>
							<view class='name'><text class="iconfont icon-baobeilianjie"></text>推广时间</view>
							<view class="select">
								<view class="select_count">
									<picker @change="bindPickerChange" :value="circle_price_check" :range="circle_price_list" range-key="name">
										<view style="padding: 20rpx;background-color: white;">{{ circle_price_list[circle_price_check].name }}</view>
									</picker>
									<text class="iconfont icon-xiangyou"></text>
								</view>
							</view>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'><text class="iconfont icon-canyuhuati"></text>推广服务</view>
							<view class="select">
								<view class="select_count" @click="addTopic">
									<text v-if="!topicName.title" class="text">选择服务</text>
									<text v-else class="text_name" @click.stop="deleteTopic">
										<text class="icon">#</text>
										<text class="title">{{topicName.title}}</text>
										<text class="iconfont icon-guanbi5"></text>
									</text>
									<text class="iconfont icon-xiangyou"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<button class="release_btn button" form-type="submit">发布价格：{{circle_price_list[circle_price_check].price}}</button>
			</view>
		</form>
		<!-- 话题弹窗 -->
		<uni-popup ref="participateTopic" type="bottom">
			<participate-topic @close="close" @getTopic="getTopic"></participate-topic>
		</uni-popup>
		<payment :payMode="payMode" :order_id="rechar_id" :pay_close="pay_close" :is-call="true" @onChangeFun="onChangeFun"
			 :totalPrice="circle_price_list[circle_price_check].price"></payment>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>	
</template>

<script>
	 
	import { mapGetters } from "vuex";
	import authorize from '@/components/Authorize';
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	import participateTopic from '../components/participateTopic.vue';
	import {TOKENNAME, HTTP_REQUEST_URL} from '@/config/app.js';
	import { getGeocoder } from '@/api/store.js';
	import {getCircleAdvertisementPriceList, circleUserInfo, circleAdvertisementEdit} from "@/api/circle";
	import { setStorage, getStorage } from '../../../libs/uniApi.js';
	import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
	import payment from '@/components/payment';
	import { configMap } from '@/utils';
	import store from '@/store';
	export default {
		components: {
			authorize,
			easyLoadimage,
			participateTopic,
			payment
		},
		data() {
			return {
				formData: {
					pic: "",
					title: "",
					community_id: 0,
				},
				imageSrc: '',
				productList: [],
				topicName: {},
				isUpload: true,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				showCd: false,
				id: "",
				order_id: "",
				imgName: "",
				upload_max: 50,
				uploadUrl: `${HTTP_REQUEST_URL}/api/upload/video`,
				tabActive: 1, // 1 服务 2 视频 3需求
				isPlay: false,
				videoContext: "",
				video_link: "",
				showVideo: false,
				videoplay: false,
				multiArray:[],
				multiIndex:[0, 0],
				mer_storeType: '',
				circle_id: 0,
				circle_price_list: [],
				circle_price_check: 0,
				pay_close: false,
				payMode: [{
					name: '微信支付',
					icon: 'icon-weixinzhifu',
					// #ifdef H5
					value: this.$wechat.isWeixin() ? 'weixin' : 'h5',
					// #endif
					// #ifdef MP
					value: 'routine',
					// #endif
					// #ifdef APP-PLUS
					value: 'weixin',
					// #endif
					title: '微信快捷支付',
					payStatus: true
					}
					// #ifdef H5 ||APP-PLUS
					,
					{
					name: '支付宝支付',
					icon: 'icon-zhifubao',
					// #ifdef H5 || APP-PLUS
					value: 'alipay',
					// #endif
					// #ifdef MP
					value: 'alipayQr',
					// #endif
					title: '支付宝支付',
					payStatus: true
					}
					// #endif
					,
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'balance',
						title: '可用余额:',
						number: 0,
						payStatus: this.$store.getters.globalData.yue_pay_status
					}
				],
				rechar_id: '0',
			};
		},
		computed: {
			...mapGetters(['isLogin', 'viewColor', 'uid']),
			...configMap({community_app_switch: []})
		},
		watch:{},
		mounted() {
		},
		onLoad(options) {
			let that = this;
			that.circle_id = options.circle_id
			if (that.isLogin) {
				that.getCircleUserInfo();
				that.getCircleAdvertisementPriceLists(options.circle_id);
			} else {
				this.isAuto = true;
				this.isShowAuth = true
			}
		},
		methods: {
			getCircleAdvertisementPriceLists(circle_id)
			{
				let that = this;
				getCircleAdvertisementPriceList(circle_id).then(res=>{
					that.circle_price_list = res.data
				}).catch(err=>{
					that.$util.Tips({
						title: err
					}, {
						tab: 3,
					})
				})
			},
			onLoadFun() {
				this.isShowAuth = false;
				return uni.switchTab({
					url: '/pages/user/index'
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e;
			},
			bindPickerChange(e) {
				let value = e.detail.value
				this.circle_price_check = value;
			},
			/*切换tab*/
			changeTab(item) {
				if(this.tabActive == item.value) return
				this.tabActive = item.value
				this.formData.image = []
			},
			/*删除话题*/
			deleteTopic(){
				this.formData.topic = {}
				this.topicName = {}
			},
			clk() {
				let that = this;
				that.$util.uploadImageOne('upload/image', function(res) {
					that.formData.pic = res.data.path;
				});
			},
			loadImage() {
				this.showCd = false
			},
			getImgName(name){
				this.imgName = name
			},
			/**删除图片*/
			DelPic: function(index) {
				let that = this
				that.formData.pic = '';
			},
			/*添加话题*/
			addTopic(){
				this.$refs.participateTopic.open();
			},
			close(){
				this.$refs.participateTopic.close();
			},
			screenChange(e) {
				let fullScreen = e.detail.fullScreen; //值true为进入全屏，false为退出全屏 
				if (!fullScreen) { 
					this.videoplay = false
					//退出全屏 this.videoplay = false; // 隐藏播放盒子 
				} 
			},
			/*获取选中的话题*/
			getTopic(item){
				this.topicName = item;
				this.$refs.participateTopic.close();
			},
			/**
			 * 提交数据
			 */
			formSubmit: function(e) {
				let that = this;
				let value = that.formData;
				if(!value.pic) return that.$util.Tips({title: '请上传图片'});
				if(!value.title) return that.$util.Tips({title: '请填写标题'});
				if(!that.topicName || !that.topicName.community_id) return that.$util.Tips({title: '请选择服务'});
				that.pay_close = true;
			},
			// 点击调起地图选择位置
			goMap() {
				let that = this,
					formData = this.formData;
				uni.authorize({
					scope: 'scope.userLocation',
					success(res) {
						uni.chooseLocation({
							success: function (res) {
								 let latitude = res.latitude,
									longitude = res.longitude,
									address = res.name;
								 getGeocoder({
								 	lat: latitude,
								 	long: longitude
								 }).then(res => {
									// let circle = {
									//  	province: res.data.address_component.province,
									//  	city: res.data.address_component.city,
									//  	district: res.data.address_component.district,
									//  	address,
									//  	lat: latitude,
									//  	lng: longitude
									// };
									formData.province = res.data.address_component.province;
									formData.city = res.data.address_component.city;
									formData.district = res.data.address_component.district;
									formData.address = address;
									formData.lat = latitude;
									formData.lng = longitude;
									that.formData = formData;
								 }).catch(e=>{
									uni.showToast({
										title: '定位失败，请手动输入地址2',
										icon: 'none',
										duration: 1000
									});
								 })
							 }
						});
					},
					fail(err) {
				
					}
				})
			},
			// 获取用户金额
			getCircleUserInfo() {
				let that = this;
				circleUserInfo().then(res=>{
					that.circle_user_info = res.data
					// #ifdef H5 ||APP-PLUS
					that.payMode[2].number = res.data.now_money;
					// #endif
					// #ifndef H5 ||APP-PLUS
					that.payMode[1].number = res.data.now_money;
					// #endif
				}).catch(err=>{
					console.log('err2', err)
				})
			},
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			payClose: function() {
				this.pay_close = false;
			},
			payCheck: function(type) {
				let that = this;
				let value = that.formData;
				value.community_id = that.topicName.community_id,
				value.circle_id = that.circle_id,
				value.advertisement_id = that.circle_price_check,
				value.type = type
				circleAdvertisementEdit(value).then(res=>{
					that.callPay(res);
				}).catch(err=>{
					that.$util.Tips({title: err});
				})
				
			},
			// 调用支付
			callPay(res) {
				let that = this, status = res.data.type,
					jsConfig = res.data.config,
					goPages = '/pages/extends/circle_create/circle_info?id='+that.circle_id;
				switch (status) {
					case 'ORDER_EXIST':
					case 'EXTEND_ORDER':
					case 'PAY_ERROR':
					case 'error':
						uni.hideLoading();
						return that.$util.Tips({
							title: res.message
						}, {
							tab: 5,
							url: goPages
						});
						break;
					case 'success':
						uni.hideLoading();
						return that.$util.Tips({
							title: res.message,
							icon: 'success'
						}, {
							tab: 5,
							url: goPages
						});
						break;
					case 'alipay':
					case "alipayQr":
						uni.hideLoading();
						that.$emit('onChangeFun', {
							action: 'payClose'
						});
						uni.navigateTo({
							url: '/pages/order_pay_back/index?keyCode='+callback_key+'&url='+jsConfig+'&type=10'
						})
						return;
						break;
						// #ifndef MP
					case "wechat":
					case "weixin":
					case "weixinApp":
						jsConfig.timeStamp = jsConfig.timestamp;
						// #ifndef APP-PLUS
						that.$wechat.pay(jsConfig).then(res => {
							return that.$util.Tips({
								title: res.message,
								icon: 'success'
							}, {
								tab: 4,
								url: goPages
							});
						}).catch(res => {
							if (res.errMsg == 'chooseWXPay:cancel') return that.$util.Tips({
								title: '取消支付'
							}, {
								tab: 5,
								url: goPages
							});
						})
						// #endif
						// #ifdef APP-PLUS
						let mp_pay_name=''
						if(uni.requestOrderPayment){
							mp_pay_name='requestOrderPayment'
						}else{
							mp_pay_name='requestPayment'
						}
						uni[mp_pay_name]({
							provider: 'wxpay',
							orderInfo: jsConfig,
							success: (e) => {
								let url = goPages;
								return that.$util.Tips({
									title: '支付成功',
									icon: 'success'
								}, {
									tab: 4,
									url: url
								});
							},
							fail: (e) => {
								uni.showModal({
									content: "支付失败",
									showCancel: false,
									success: function(res) {
										let url = goPages;
										uni.redirectTo({
											url: url
										})
									}
								})
							},
							complete: () => {
								uni.hideLoading();
							},
						});
						// #endif
						break;
						// #endif
						// #ifdef MP
					case "routine":
						jsConfig.timeStamp = jsConfig.timestamp;
						let mp_pay_name=''
						if(uni.requestOrderPayment){
							mp_pay_name='requestOrderPayment'
						}else{
							mp_pay_name='requestPayment'
						}
						uni[mp_pay_name]({
							...jsConfig,
							success: function(res) {
								uni.hideLoading();
								return that.$util.Tips({
									title: '支付成功',
									icon: 'success'
								}, {
									tab: 3
								});
							},
							fail: function(e) {
								uni.hideLoading();
								return that.$util.Tips({
									title: '取消支付'
								}, {
									tab: 3
								});
							},
						})
						break;
						// #endif
					case "balance":
						uni.hideLoading();
						console.log(res, goPages);
						//余额不足
						return that.$util.Tips({
							title: res.data.msg
						}, {
							tab: 3
						});
						break;
						// #ifdef H5
					case 'h5':
						let host = window.location.protocol + "//" + window.location.host;
						let url = `${host}/pages/users/user_payment/index`
						let eUrl = encodeURIComponent(url)
						let jsurl = jsConfig.mweb_url || jsConfig.h5_url
						let locations = `${jsurl}&redirect_url=${eUrl}`
						setTimeout(() => {
							location.href = locations;
						}, 100);
						break;
						// #endif
						// #ifdef APP-PLUS
					case 'alipayApp':
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: jsConfig,
							success: (e) => {
								return that.$util.Tips({
									title: '支付成功',
									icon: 'success'
								}, {
									tab: 5,
									url: goPages
								});
							},
							fail: (e) => {
								uni.showModal({
									content: "支付失败",
									showCancel: false,
									success: function(res) {
										uni.redirectTo({
											url: goPages
										})
									}
								})
							},
							complete: () => {
								uni.hideLoading();
							},
						});
						break;
						// #endif
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F5F5F5;
	}
	.crop_btn{
		line-height: 90rpx;
		height: 90rpx;
	height: calc(90rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(90rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}
	.container{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 20;
		width: 750rpx;
		height:100vh;
	}
	.release_content{
		margin-top: 30rpx;
		.release_tab{
			border-radius: 16rpx 16rpx 0 0;
			border-bottom: 1rpx solid #E4E4E4;
			background: #fff;
			align-items: center;
			justify-content: center;
			height: 86rpx;
			.tab_item{
				margin: 0 40rpx;
				font-size: 32rpx;
				color: #999;
				position: relative;
				line-height: 86rpx;
				cursor: pointer;
				&.on{
					color: #E93323;
					&::after{
						content: "";
						display: inline-block;
						width: 100%;
						height: 3rpx;
						background: #E93323;
						position: absolute;
						bottom: 2rpx;
						left: 0;
					}
				}
				.iconfont{
					margin-right: 10rpx;
					font-size: 32rpx;
				}
			}
		}
		padding: 0 20rpx;
		.release_item{
			background: #ffffff;
			padding: 0 30rpx;
			border-radius: 10rpx;
			image {
				width: 100%;
			}
		}
		.photo_count{
			padding: 30rpx 0;
		}
	}
	::v-deep.input_photo .easy-loadimage,::v-deep.input_photo uni-image,::v-deep.input_photo image{
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx!important;
	}
	.input_photo .pictrue{
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx!important;
		margin-right: 11rpx;
		position: relative;
		overflow: hidden;
		
		&:nth-child(3n){
			margin-right: 0;
		}
		.close_btn{
			width: 30rpx;
			height: 30rpx;
			background: rgba(0,0,0,.6);
			border-radius: 0 12rpx 0 12rpx;
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 10;
			.iconfont{
				color: #ffffff;
				font-size: 12rpx;
			}
		}
		.cover_text{
			display: flex;
			width: 58rpx;
			height: 29rpx;
			background: #E93323;
			border-radius: 0px 12rpx 0px 12rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 10;
			align-items: center;
			justify-content: center;
			font-size: 18rpx;
			color: #fff;
		}
	}
	::v-deep.loading-img{
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx;
	}
	.input_photo .pictrue{
		margin-bottom: 20rpx;
		.videoHover{
			width: 180rpx;
			height: 180rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
			>view{
				width: 50rpx;
				height: 50rpx;
				background: #000000;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.iconfont{
					color: #ffffff;
					font-size: 21rpx;
				}
			}	
		}
		.video-text{
			display: block;
			width: 180rpx;
			text-align: center;
			color: #ffffff;
			font-size: 18rpx;
			z-index: 13;
			position: absolute;
			bottom: 20rpx;
		}
		video{
			width: 180rpx;
			height: 180rpx;
			border-radius: 12rpx;
		}
	}
	.input_photo .add{
		background: #f6f6f6;
		color: #666666;
		.iconfont{
			font-size: 50rpx;
		}
		.text{
			margin-top: 20rpx;
			font-size: 27rpx;
		}
	}
	.textarea textarea {
		font-size: 28rpx;
		padding-bottom: 38rpx;
		width: 100%;
		box-sizing: border-box;
		height: 400rpx;
		overflow: hidden;
	}
	.textarea .placeholder {
		color: #BBBBBB;
	}
	.release_item .item{
		height: 106rpx;
		border-bottom: 1rpx solid #eee;
		position: relative;
		font-size: 30rpx;
		flex-wrap: nowrap;
		&:last-child{
			border-bottom: none;
		}
		.name{
			color: #333333;
			.iconfont {
				margin-right: 10rpx;
				font-size: 28rpx;
			}
		}
		.select{
			color: #bbbbbb;
			flex: 1;
			overflow: hidden;
			.select_count{
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
			.text{
				margin-right: 15rpx;
				display: flex;
				align-items: center;
				.image,image,uni-image{
					width: 60rpx;
					height: 60rpx;
					margin-right: 5rpx;
				}
			}
			.iconfont{
				font-size: 24rpx;
			}
			.text_name{
				// color: var(--view-theme);
				color: #201B17;
				padding: 5rpx 12rpx;
				background: var(--view-minorColor);
				border-radius: 23rpx;
				font-size: 24rpx;
				margin-right: 10rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				.icon{
					color: var(--view-theme);
					font-weight: bold;
					font-size: 24rpx;
				}
				.title{
					margin: 0 10rpx;
					max-width: 300rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.iconfont{
					font-size: 16rpx;
				}
			}
		}
	}
	.button{
		width: 710rpx;
		height: 86rpx;
		line-height: 86rpx;
		color: #201B17;
		text-align: center;
		font-size: 32rpx;
		background: var(--view-theme);
		border-radius: 43rpx;
	}
	.release_btn{
		margin-top: 30rpx;
	}
	.video-count{
		position: fixed;
		width: 600rpx;
		height: 500rpx;
		top: 50%;
		left: 50%;
		margin-left: -300rpx;
		margin-top: -250rpx;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: center;
		.videoLink{
			width: 600rpx;
			height: 500rpx;
		}
	}
	.check_label_list {
		// display: flex;
		// flex-wrap: nowrap;
		white-space: nowrap;
		.check_label_item {
			width: 120rpx;
			text-align: center;
			position: relative;
			display: inline-block;
			.check_label_close {
				position: absolute;
				top: 0;
				right: 0;
				width: 30rpx;
				height: 30rpx;
				text-align: center;
				line-height: 30rpx;
				border-radius: 100%;
				background-color: #ccc;
			}
			.check_label_avatar image{
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
	.location {
		text-align: center;
	}
</style>
